Web Development


Web Development 04 – Site Planning and Design

Students will plan, design, add content, and maintain web pages.

Objectives:

0401 Project requirements
  • Identify the purpose, audience, and audience needs for a website.
  • Demonstrate knowledge of website accessibility standards that address the needs of people with visual and motor impairments. Such as using alt tags, strong instead of bold, etc..
  • Identify and follow the steps in the website planning and development process.

0402 Planning site design and page layout
  • Demonstrate knowledge of best practices for designing a website; such as, maintaining consistency, separating content from design, using standard fonts and Web-safe colors.
  • Identify basic principles of website usability, readability, and accessibility.
  • Plan a website by using sketches, website hierarchy, or a site map.
  • Communicate with others (such as peers and clients) about design and content plans.
  • *Produce website designs that work equally well on various operating systems and browser versions/configurations.
  • *Plan, communicate, or present a client’s website before, during or after website development.

0403 Create content for website
  • Create and prepare 2D images.
  • Prepare rich media; such as, video, sound, or animation.
  • *Identify when to use various image and digital media file formats.
  • *Edit, and slice images for web content.
  • *Insert navigation bars, rollover images, or buttons created in graphics editor.

0404 Uploading and maintaining a site
  • Understand and be able to describe the capabilities of web servers.
  • Upload pages to a web server.
  • Conduct basic technical tests such as validating the website (wc3 compliant), accessibility, SEO, etc.
  • Present web pages to others for quality assurances (QA) such as team members and clients for feedback and evaluation on technical merits and usability.
  • *Identify methods for collecting site feedback, such as using counters, feedback forums, Google Analytics.
  • *Provide site maintenance using bug reports, backups, and promotion.
  • *Document all aspects of website maintenance.

0405* Web server (Optional Objective)
  • Install a web server on a computer or virtual machine such as wamp, iis, apache etc.
  • Identify the benefits and drawbacks of running your own web server versus using a service provider.

0406 Terminology – Review and understand the pertinent terminology. – Review and understand the pertinent terminology.

Lessons & Activities:

Opera WSC #6 -- Information Architecture—planning out a web site, by Jonathan Lane.
Opera WSC #7 -- What does a good web page need?, by Mark Norman Francis.
Opera WSC #8 -- Colour Theory, by Linda Goin.
Opera WSC #9 -- Building up a site wireframe, by Linda Goin.
Opera WSC #10 -- Colour schemes and design mockups, by Linda Goin.
Opera WSC #11 -- Typography on the web, by Paul Haine.
Opera WSC #25 -- Accessibility basics, by Tom Hughes-Croucher.
Opera WSC #26 -- Accessibility testing, by Benjamin Hawkes-Lewis.
Expressions Web Design #3 -- Introduction to Web Design Using Microsoft® Expression® (Beta), Module 3 Designing for Communication
Expressions Web Design #4 -- Introduction to Web Design Using Microsoft® Expression® (Beta), Module 3 Designing for Communication
Expressions Web Design #5 -- Introduction to Web Design Using Microsoft® Expression® (Beta), Module 5 Beyond the Basics with Expression Web
Expressions Web Design #6 -- Introduction to Web Design Using Microsoft® Expression® (Beta), Module 6 The Design Process
Expressions Web Design #7 -- Introduction to Web Design Using Microsoft® Expression® (Beta), Module 7 The Production Process
Expressions Web Design #8 -- Introduction to Web Design Using Microsoft® Expression® (Beta), Module 8 Web Publishing and Maintenance
Adobe Digital Design -- Unit 1: Graphic design with Adobe Fireworks CS4 -- Instructor materials, Presentations, Student materials
Adobe Digital Design -- Unit 3: Building a basic client website -- Instructor materials, Presentations, Student materials, Media assets
Adobe Digital Design -- Unit 4: Review workshop -- Instructor materials, Student materials
Adobe Digital Design -- Unit 6: Digital narratives using Adobe Flash CS4 -- Instructor materials, Student materials, Media assets